<div class="header-panel">
    <mat-icon>content_paste</mat-icon>
    {{'reports.list-title' | translate}}
</div>
<div class="work-panel">
    <div class="container">
        <table mat-table #table [dataSource]="dataSource" multiTemplateDataRows matSort>
            <!-- Checkbox Column -->
            <ng-container matColumnDef="select">
                <th mat-header-cell *matHeaderCellDef [ngClass]="'selectidthClass'">
                    <button mat-icon-button (click)="$event.stopPropagation();onAddReport()" class="remove">
                        <mat-icon>add</mat-icon>
                    </button>
                </th>
                <td mat-cell *matCellDef="let element" [ngClass]="'selectidthClass'">
                    <button mat-icon-button (click)="$event.stopPropagation();onEditReport(element)" class="remove">
                        <mat-icon>edit</mat-icon>
                    </button>
                </td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'reports.list-name' | translate}} </th>
                <td mat-cell *matCellDef="let element"> {{element.name}} </td>
            </ng-container>
            <!-- Receiver Column -->
            <ng-container matColumnDef="receiver">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'reports.list-receiver' | translate}} </th>
                <td mat-cell *matCellDef="let element"> {{element.receiver}} </td>
            </ng-container>
            <!-- Interval Column -->
            <ng-container matColumnDef="scheduling">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'reports.list-scheduling' | translate}} </th>
                <td mat-cell *matCellDef="let element"> {{getScheduling(element.scheduling)}} </td>
            </ng-container>
            <!-- Type Column -->
            <ng-container matColumnDef="type">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'reports.list-type' | translate}} </th>
                <td mat-cell *matCellDef="let element"> {{element.type}} </td>
            </ng-container>
            <!-- Button expand Column -->
            <ng-container matColumnDef="expand">
                <th mat-header-cell *matHeaderCellDef> </th>
                <td mat-cell *matCellDef="let element">
                    <button mat-icon-button (click)="$event.stopPropagation();toogleDetails(element)" class="remove">
                        <mat-icon *ngIf="element !== expandedElement">expand_more</mat-icon>
                        <mat-icon *ngIf="element === expandedElement">expand_less</mat-icon>
                    </button>
                </td>
            </ng-container>
            <!-- Button create Column -->
            <ng-container matColumnDef="create">
                <th mat-header-cell *matHeaderCellDef> </th>
                <td mat-cell *matCellDef="let element">
                    <button mat-icon-button (click)="$event.stopPropagation();onStartReport(element)">
                        <mat-icon>play_arrow</mat-icon>
                    </button>
                </td>
            </ng-container>
            <!-- Button remove Column -->
            <ng-container matColumnDef="remove">
                <th mat-header-cell *matHeaderCellDef> </th>
                <td mat-cell *matCellDef="let element">
                    <button mat-icon-button (click)="$event.stopPropagation();onRemoveReport(element)" class="remove">
                        <mat-icon>clear</mat-icon>
                    </button>
                </td>
            </ng-container>

            <ng-container matColumnDef="detailColumns">
                <td mat-cell *matCellDef="let details" [attr.colspan]="displayedColumns.length" class="details-container">
                    <div class="report-details" [@detailExpand]="details === expandedElement ? 'expanded' : 'collapsed'">
                        <div class="details-description">
                            <div *ngFor="let file of currentDetails" class="report-detail">
                                <div>{{file}}</div>
                                <button mat-icon-button (click)="$event.stopPropagation();onDownloadDetail(file)">
                                    <mat-icon>download</mat-icon>
                                </button>
                            </div>
                        </div>
                    </div>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let element; columns: displayedColumns;" class="my-mat-row"
                (click)="toogleDetails(element)">
            </tr>
            <tr mat-row *matRowDef="let row; columns: ['detailColumns']" class="detail-row"></tr>
        </table>
    </div>
</div>
<button mat-fab color="primary" (click)="onAddReport()" class="fab-add">
    <mat-icon class="">add</mat-icon>
</button>